<template>
  <div>
    <!-- 面包屑导航 type-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 修改密码界面 -->
    <div style="margin-top: 100px; margin-left: 200px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input
            type="password"
            v-model="ruleForm.oldPass"
            autocomplete="off"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input
            type="password"
            v-model="ruleForm.newPass"
            autocomplete="off"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    //原密码非空校验
    var oldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("原密码不能为空"));
      }
      callback();
    };
    var newPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("新密码不能为空"));
      }
      callback();
    };
    var checkPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else if (value != this.ruleForm.newPass) {
        return callback(new Error("两次密码不一致！"));
      }
      callback();
    };
    return {
      ruleForm: {
        oldPass: "",
        checkPass: "",
        newPass: "",
      },
      rules: {
        oldPass: [{ validator: oldPass, trigger: "blur" }],
        newPass: [{ validator: newPass, trigger: "blur" }],
        checkPass: [{ validator: checkPass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("请填写完表单！");
        } else {
          //获取用户信息
          let u = localStorage.getItem("userdata");
          let user = JSON.parse(u);
          //包含新密码的自定义对象
          let obj = {
            id: user.id,
            password: this.ruleForm.newPass,
          };
          //校验原密码
          this.$axios
            .get("/api/user/getPassword/" + user.id)
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                if (res.data.data == this.ruleForm.oldPass) {
                  //验证成功，开始修改
                  this.$axios
                    .put("/api/user/password", obj)
                    .then((res) => {
                      console.log(res);
                      if (res.data.code == 200) {
                        this.$message({
                          type: "success",
                          message: "修改成功！请重新登录！",
                        });
                        setTimeout(() => {
                          this.$store.commit("logout", "false");
                          this.$router.push({ path: "/login" });
                        }, 1000);
                      }
                    })
                    .catch((res) => {
                      this.$message.error("修改失败！");
                      this.resetForm();
                    });
                }else{
                  this.$message.error('原密码错误！');
                }
              }
            })
            .catch((err) => {
              this.$message.error("修改失败，请稍后再试！");
            });
        }
      });
    },
    resetForm() {
      (this.ruleForm.oldPass = ""),
        (this.ruleForm.newPass = ""),
        (this.ruleForm.checkPass = "");
    },
  },
};
</script>